import { rules } from './formRules'
/**
 * @description 表格配置
 * @param 其余参数参考elementPlus table
 * @param {String} type 类型：input输入框，select下拉框，tree树结构，number数字，date时间
 * @param {Boolean} required 是否必填，默认false
 * @param {Array} option 下拉选项，选择器和树结构需要
 * @param {Object} optionConfig 下拉选项对象集合，在组件中传入{xxx: []}
 * @param {Boolean|String} disabled 为字符串时，disabledConfig和disabledKeys必须存在一个，如果都存在则互相对比，相同值则禁用
 * @param {String} disabledKeys 禁用对比字段：转递当前行需要对比字段key
 * @param {Object} disabledConfig 在组件中传入的disabledConfig对象，用于对比disabledKeys或其他值
 * @param {String} slotName 自定义插槽名称
 * @param {String} slotForm 自定义插槽名称，el-form-item标签包裹
 */

// form/query配置，使用的key作为唯一，表格是prop
export const form = [
  {
    width: '100%',
    key: 'name',
    label: '用户名',
    type: 'input',
    required: true,
    colSpan: 8
  },
  {
    width: '100%',
    key: 'phone',
    label: '手机号',
    type: 'input',
    rules: rules['phone'],
    colSpan: 8
  },
  {
    width: '100%',
    key: 'select',
    label: '选择器',
    type: 'select',
    option: [{ id: 1, label: '天河区' }],
    required: true,
    colSpan: 8,
    // 简单的处理
    change: (data: any) => {
      data.name = undefined
      data.phone = undefined
    }
  },
  {
    width: '100%',
    key: 'selectSearch',
    label: '搜索选择器',
    type: 'select',
    filterable: true,
    option: [{ id: 1, label: '白云区' }],
    colSpan: 12
  },
  {
    width: '100%',
    key: 'tree',
    label: '树结构',
    type: 'tree',
    option: [
      {
        id: 1,
        label: '广州',
        children: [
          {
            id: 11,
            label: '天河区'
          }
        ]
      },
      {
        id: 2,
        label: '湖南'
      }
    ],
    colSpan: 12
  },
  {
    key: 'cascader',
    label: '级联选择器',
    type: 'cascader',
    option: [
      {
        id: 1,
        label: '广州',
        children: [
          {
            id: 11,
            label: '天河区'
          }
        ]
      },
      {
        id: 2,
        label: '湖南'
      }
    ],
    params: {
      name: 'label' // 赋值name = label
    }
  },
  {
    key: 'date',
    label: '时间',
    type: 'date'
  },
  {
    key: 'datetime',
    label: '时分秒',
    type: 'datetime',
    colSpan: 12
  },
  {
    key: 'daterange',
    label: '日期区间',
    type: 'daterange',
    colSpan: 12,
    params: ['start', 'end']
  },
  {
    key: 'customize',
    label: '自定义',
    slotName: 'customize'
  },
  {
    key: 'customize2',
    label: '自定义2',
    slotName: 'customize'
  }
]

// 添加行
export const table = {
  propList: [
    {
      width: 120,
      label: '用户名',
      prop: 'name',
      type: 'input',
      disabled: 'name' // 组件中传入的disabledConfig对象书写方式
    },
    {
      width: 120,
      label: '年龄',
      prop: 'age',
      type: 'input',
      disabled: 'age',
      disabledKeys: 'ages' // 需要跟ages字段对比，不相等则禁用
    },
    {
      width: 120,
      label: '年龄2',
      prop: 'ages',
      type: 'input',
      disabled: 'ages', // 组件中传入的disabledConfig对象书写方式
      disabledKeys: 'id' // 需要跟id字段对比，不相等则禁用
      // 通过函数判断开启是否必填
    },
    {
      width: 200,
      prop: 'requiredDisabled',
      label: '测试效验/禁用',
      type: 'input',
      p: '用户名输入123开启',
      required: ({ row }) => row.name === '123',
      disabled: ({ row }) => row.name !== '123'
    },
    {
      width: 200,
      prop: 'number',
      label: '数字',
      type: 'number'
    },
    {
      width: 200,
      prop: 'select',
      label: '选择器',
      type: 'select',
      option: [
        { label: '选项1', id: 1 },
        { label: '选项2', id: 2 }
      ],
      required: true
    },
    {
      width: 200,
      prop: 'selectSearch',
      label: '搜索选择器',
      type: 'select',
      filterable: true,
      option: [
        { label: '选项1', id: 1 },
        { label: '选项2', id: 2 }
      ]
    },
    {
      width: 200,
      prop: 'tree',
      label: '树选择器',
      type: 'tree',
      option: 'treeOption' // 组件中传入的对象
    },
    {
      width: 200,
      label: '日期选择器',
      prop: 'date',
      type: 'date',
      // 日期选择器类型重写，也可在组件中传入dateConfig:{type:'date'}
      picker: 'date'
    },
    {
      label: '附件',
      prop: 'annex',
      slotForm: 'annex'
    },
    {
      label: '操作',
      prop: 'operate',
      slotForm: 'operate',
      fixed: 'right'
    }
  ],
  showIndex: true,
  // 复选框
  showSelect: false,
  // 分页
  showFooter: false,
  // 是否固定序号/复选框
  showFixed: false
}
